<template>
  <div id="up">
    <h2>螺旋上线</h2>
    <div class="app-container1" style="margin-top: -50px">
      <h1>关键数据</h1>
      <el-table
        vv-loading="loading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
        :cell-style="color1"
      >
        <el-table-column label="线速度(m/s)" align="center" prop="speed" />
        <el-table-column label="当前电流(A)" align="center" prop="i" />
        <el-table-column label="当前电压(V)" align="center" prop="v" />
        <el-table-column
          label="当前功耗(W)"
          align="center"
          prop="consumptionNow"
        />
        <el-table-column
          label="总能耗(KWH)"
          align="center"
          prop="consumptionAll"
        />
        <el-table-column label="运行状态" align="center" prop="state" />
      </el-table>
    </div>
    <el-date-picker
      clearable
      v-model="lxsxTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择测试时间"
      style="margin-left: 30px"
    >
    </el-date-picker>
    <el-button
      type="primary"
      icon="el-icon-search"
      size="mini"
      @click="handleQuery"
      style="margin-left: 20px"
      >搜索</el-button
    >
    <div class="proCharts" ref="echarts" style="height: 300px"></div>
    <div class="proCharts" ref="echart" style="height: 300px"></div>
    <!-- <div class="proCharts" ref="echar" style="height: 300px"></div> -->
    <div class="proCharts" ref="echa" style="height: 300px"></div>
    <!-- <div class="proCharts" ref="changeProdNums" style="height: 300px"></div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  lxsxLine,
  lxsxgetData,
  lxtsspeed,
  lxsxNum,
  changeProdNumsApi,
} from "@/api/system/zdsx.js";
import axios from "axios";
export default {
  data() {
    return {
      loading: false,
      lxsxTime: "",
      tableData: [
        {
          speed: null,
          i: null,
          v: null,
          consumptionNow: null,
          consumptionAll: null,
          state: null,
        },
      ],
    };
  },
  mounted() {
    this.getOilList();
    this.getTypeList();
    // this.get();
    // this.getList();
    this.List();
  },
  methods: {
    color1({ row, column }) {
      if (column.label === "运行状态") {
        if (row.state === "功耗过高") {
          return "background-color:#ff6666;color:#fff";
        }
      } else if (column.label === "当前功耗(W)") {
        if (row.state === "功耗过高")
          return "background-color:#ff6666;color:#fff";
      }
    },
    getTypeList() {
      this.loading = true;
      lxsxgetData().then((response) => {
        this.tableData = response.data;
        this.loading = false;
      });
      console.log(this.queryParams);
    },
    getOilList() {
      this.loading = true;
      lxsxLine(this.lxsxTime).then((res) => {
        const option = {
          xAxis: {
            data: res.data[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["电流(A)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "电流(A)",
              data: res.data[0],
              type: "line",
            },
          ],
        };
        const E = echarts.init(this.$refs.echarts);
        E.setOption(option);
        const option2 = {
          xAxis: {
            data: res.data[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["电压(V)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "电压(V)",
              data: res.data[2],
              type: "line",
            },
          ],
        };
        const E2 = echarts.init(this.$refs.echart);
        E2.setOption(option2);
      });
    },
    // get() {
    //   this.loading = true;
    //   lxsxLine(this.lxsxTime).then((res) => {
    //     const option = {
    //       xAxis: {
    //         data: res.data[1],
    //       },
    //       yAxis: {
    //         type: "value",
    //       },
    //       legend: {
    //         data: ["电压(V)"],
    //       },
    //       tooltip: {
    //         trigger: "axis",
    //         axisPointer: {
    //           type: "cross",
    //           label: {
    //             backgroundColor: "#6a7985",
    //           },
    //         },
    //       },
    //       series: [
    //         {
    //           name: "电压(V)",
    //           data: res.data[2],
    //           type: "line",
    //         },
    //       ],
    //     };
    //     const E = echarts.init(this.$refs.echart);
    //     E.setOption(option);
    //   });
    // },
    getList() {
      this.loading = true;
      lxtsspeed(this.zdsxTime).then((res) => {
        const option = {
          xAxis: {
            data: res.data[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["速度(m/s)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "速度(m/s)",
              data: res.data[0],
              type: "line",
            },
          ],
        };
        const E = echarts.init(this.$refs.echar);
        E.setOption(option);
      });
    },
    List() {
      this.loading = true;
      lxsxNum(this.lxsxTime).then((res) => {
        const option = {
          xAxis: {
            data: res.data[1],
          },
          yAxis: {
            type: "value",
          },

          legend: {
            data: ["生产数量(个)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "生产数量(个)",
              data: res.data[0],
              type: "line",
              markPoint: {
                data: [
                  {
                    type: "max",
                  },
                  {
                    type: "min",
                  },
                ],
              },
              markLine: {
                data: [{ type: "average" }],
              },
            },
          ],
        };
        const E = echarts.init(this.$refs.echa);
        E.setOption(option);
      });
      // changeProdNumsApi(this.lxsxTime).then((res) => {
      //   console.log(res, 111);
      //   const option = {
      //     xAxis: {
      //       data: res.data[1],
      //     },
      //     yAxis: {
      //       type: "value",
      //     },

      //     legend: {
      //       data: ["螺旋上线换产参数"],
      //     },
      //     tooltip: {
      //       trigger: "axis",
      //       axisPointer: {
      //         type: "cross",
      //         label: {
      //           backgroundColor: "#6a7985",
      //         },
      //       },
      //     },
      //     series: [
      //       {
      //         name: "螺旋上线换产参数",
      //         data: res.data[0],
      //         type: "line",
      //         markPoint: {
      //           data: [
      //             {
      //               type: "max",
      //             },
      //             {
      //               type: "min",
      //             },
      //           ],
      //         },
      //         markLine: {
      //           data: [{ type: "average" }],
      //         },
      //       },
      //     ],
      //   };
      //   const E = echarts.init(this.$refs.changeProdNums);
      //   E.setOption(option);
      // });
    },
    handleQuery() {
      this.getOilList();
      this.getTypeList();
      // this.get();
      // this.getList();
      this.List();
      console.log(1111111);
    },
  },
};
</script>

<style>
.proCharts {
  width: 100%;
  height: 600px;
  /* margin-top: -300px; */
}
h2 {
  font-size: 35px;
  text-align: center;
  color: #0072c6;
}
</style>
